<template>
	<view>
		<view class="head flex-row">
			<xbc-avatar :src="user.avatar" />
			<text class="name">{{ user.name }}</text>
		</view>
		<view class="row flex-row">
			<text class="label">加入黑名单</text>
			<switch :checked="user.isBlack ? true : false" style="transform:scale(0.6) translateX(40rpx)" disabled />
		</view>
		<view class="space"></view>
		<view @tap="sendMessage" v-if="from == 'list'" class="btn flex-column">发送消息</view>
		<view @tap="clearMessage" class="btn flex-column">清空聊天记录</view>
	</view>
</template>

<script>
import XBCIM from 'xbcim'
export default{
	data(){
		return {
			user: {},
			from: '',
			eventChannel: null
		}
	},
	async onLoad({ userId, source }){
		this.from = source
		this.user = await XBCIM.getUserProfile({ userId })
		this.eventChannel = this.getOpenerEventChannel()
	},
	methods: {
		clearMessage() {
			const $this = this
			uni.showModal({
				title: '提示',
				content: '是否确认清空聊天记录',
				success(res){
					if(res.cancel) return
					const { conversationId, type } = uni.getStorageSync('currentConversation')
					XBCIM.clearConversation({
						conversationId,
						conversationType: type
					}).then(() => {
						$this.eventChannel.emit('clearMessage')
						uni.showToast({
							icon: 'none',
							title: '聊天记录删除成功'
						})
					}).catch((err) => {
						uni.showToast({
							icon: 'none',
							title: '聊天记录删除失败'
						})
					})
				}
			})
		},
		async sendMessage() {
			const conversation = await XBCIM.getConversationDetail({
				conversationType: XBCIM.CONVERSATION_TYPE.SINGLE,
				userId: this.user.userId
			})
			uni.setStorageSync('currentConversation', this.conversation)
			uni.redirectTo({
				url: `/pages/chat/single?id=${this.conversation?.conversationId}`
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.space {
	height: 20rpx;
	margin: 30rpx 0 100rpx;
	background-color: #f5f5f5;
}
.btn {
	color: red;
	height: 80rpx;
	margin: 40rpx;
	font-size: 32rpx;
}

.row {
	height: 92rpx;
	padding: 0 40rpx;
	
	.label {
		font-size: 30rpx;
	}
	
	.iconfont {
		color: #666;
		font-size: 36rpx;
	}
}

.head {
	padding: 20rpx 40rpx;
	margin-bottom: 20rpx;
	justify-content: flex-start;
	
	.name {
		font-size: 32rpx;
		font-weight: bold;
		margin-left: 30rpx;
	}
}
</style>